<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>注册</span>
                </div>
            </template>
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" />
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input
                        v-model="ruleForm.pwd"
                        type="password"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirm">
                    <el-input
                        v-model="ruleForm.confirm"
                        type="password"
                        autocomplete="off"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)"
                        >Submit</el-button
                    >
                    <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router'
import { ElMessage } from "element-plus";
import { getByUsername } from "../service/user";
import { reg } from "../service/user";
const ruleFormRef = ref();
const router = useRouter();
const ruleForm = reactive({
    pwd: "",
    confirm: "",
    username: "",
});
const validateUsername = async (rule, value, callback) => {
    let res = await getByUsername(value);
    if (res.code == 1) {
        callback();
    } else {
        callback(new Error("用户名已存在"));
    }
};
const validatePass = (rule, value, callback) => {
    if (value === "") {
        callback(new Error("密码不能为空"));
    } else {
        if (ruleForm.confirm !== "") {
            if (!ruleFormRef.value) return;
            ruleFormRef.value.validateField("confirm", () => null);
        }
        callback();
    }
};
const validatePass2 = (rule, value, callback) => {
    if (value === "") {
        callback(new Error("确认密码不能为空"));
    } else if (value !== ruleForm.pwd) {
        callback(new Error("两次密码不一致"));
    } else {
        callback();
    }
};
const rules = reactive({
    username: [
        { required: true, message: "用户名不能为空" },
        { pattern: /^\w{5,20}$/, message: "用户名格式不正确" },
        { validator: validateUsername, trigger: "blur" },
    ],
    pwd: [
        { required: true, message: "密码不能为空" },
        { pattern: /^\w{6,}$/, message: "密码格式不正确" },
        { validator: validatePass, trigger: "blur" },
    ],
    confirm: [
        { required: true, message: "确认密码不能为空" },
        { pattern: /^\w{6,}$/, message: "确认密码格式不正确" },
        { validator: validatePass2, trigger: "blur" },
    ],
});
const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid) => {
        if (valid) {
            await reg(ruleForm);
            router.push("/login");
            ElMessage({
                message: "注册成功",
                type: "success",
            });
        } else {
            ElMessage.error("注册失败");
            return false;
        }
    });
};
</script>
<style scoped>
.title {
    color: red;
}
.box-card {
    width: 500px;
    margin: auto;
}
</style>
